<template>
    <div>
      <h1 style="text-align: center;font-size: 24px;margin: 30px 0;">大赛介绍</h1>
      <div class="img-box" v-if='bigData.introductionType == 1 || bigData.introductionType == null'>
          <img :src="bigData.introductionImgUrl" alt="">
          <div>
            <h1>{{bigData.name}}</h1>
            <p>{{bigData.introduction}}</p>
          </div>
      </div>
      <div class="w1200" v-else>
        <div v-html='bigData.introductionContext'></div>
      </div>
    </div>
</template>
           
<script>
export default{
    data() {
      return {
        bigData:{introductionImgUrl:''}
      }
    },  
    // props:{
    //   Pdata:{
    //     type:Object,		///type: [String, Number],
    //     default:() =>{return {introductionImgUrl:''}}
    //   }
    // },  
    // computed:{
    //   isShow() {
    //     return this.Pdata;
    //   }
    // },
    // watch:{
    //   isShow:{
    //     handler(nv,ov){
    //       this.bigData = nv
    //     },
    //     immediate: true,
    //     deep:true,
    //   }
    // },
    methods: {
      async getCompetitionZoneList(){
        let {data:res} = await this.API.getCompetitionZoneList()
        this.bigData = res
      }
    },
    mounted() {
      this.getCompetitionZoneList()
    },

}
</script>
<style lang='scss' scoped>
  .img-box{
    position: relative;
    margin-bottom: 60px;
    img{
      width: 100%;
      height: 100%;
    }
    div{
      position: absolute;
      top: 30%;
      left: calc((100% - 1200px) / 2);
      width: 550px;
      h1{
        color: #fff;
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 15px;
      }
      p{
        color: #c5c6c9;
        font-size: 16px;
      }
    }
  }

  
            
</style>